<template>
    <div class="rightBox">
        <div class="top">
            <dv-border-box-13>
                <div style="padding:20px;">
                    <div class="title">
                        <img src="../../../public/Government/icon.png" alt="">
                        <span>月度累计办件总量</span>
                    </div>
                    <div class="number">
                        <span>{{ monthlyDigits[0] }}</span>
                        <span>{{ monthlyDigits[1] }}</span>,
                        <span>{{ monthlyDigits[2] }}</span>
                        <span>{{ monthlyDigits[3] }}</span>
                        <span>{{ monthlyDigits[4] }}</span>件
                    </div>
                    <div style="display: flex;justify-content: center;gap: 20px;">
                        <div class="item">
                            <span style="color: #0295dc;">12345</span>
                            <span style="font-size: 15px;">本月取号总量</span>

                        </div>
                        <div class="item">
                            <span style="color: #0295dc;">2345</span>
                            <span style="font-size: 15px;">本月办件总量</span>
                        </div>
                        <div class="item">
                            <span style="color: #0295dc;">2234</span>
                            <span style="font-size: 15px;">本月满意总量</span>
                        </div>
                    </div>
                </div>
            </dv-border-box-13>
        </div>
        <div class="center">
            <dv-border-box-13>
                <div style="padding:20px;">
                    <div class="title">
                        <img src="../../../public/Government/icon.png" alt="">
                        <span>年度累计办件总量</span>
                    </div>
                    <div class="number">
                        <span>{{ yearlyDigits[0] }}</span>,
                        <span>{{ yearlyDigits[1] }}</span>
                        <span>{{ yearlyDigits[2] }}</span>
                        <span>{{ yearlyDigits[3] }}</span>,
                        <span>{{ yearlyDigits[4] }}</span>
                        <span>{{ yearlyDigits[5] }}</span>
                        <span>{{ yearlyDigits[6] }}</span>件
                    </div>
                    <div style="display: flex;justify-content: center;gap: 20px;">
                        <div class="item">
                            <span style="color: #0295dc;">1234570</span>
                            <span style="font-size: 15px;">累计取号总量</span>

                        </div>
                        <div class="item">
                            <span style="color: #0295dc;">234581</span>
                            <span style="font-size: 15px;">累计办件总量</span>
                        </div>
                        <div class="item">
                            <span style="color: #0295dc;">223479</span>
                            <span style="font-size: 15px;">累计满意总量</span>
                        </div>
                    </div>

                </div>
            </dv-border-box-13>
        </div>
        <div class="bottom">
            <dv-border-box-13>
                <div style="padding:20px;">
                    <div class="title">
                        <img src="../../../public/Government/icon.png" alt="">
                        <span>累计办事满意度</span>
                    </div>
                    <div id="main" class="main"></div>
                    <dv-capsule-chart :config="config" style="width:100%;height:200px;transform: translateY(-21%);" />
                </div>
            </dv-border-box-13>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const monthlyTotal = ref(11111); // 初始值
const monthlyDigits = ref([1, 1, 1, 1, 1]); 
let monthlyTimer = null;
const yearlyTotal = ref(1234501); // 初始值
const yearlyDigits = ref([1, 2, 3, 4, 5,0,1]); 
let yearlyTimer = null;

onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'gauge',
                radius: '75%',
                center: ['50%', '50%'],
                startAngle: 225, // 起始角度
                endAngle: -45,     // 结束角度
                min: 0,
                max: 100,
                splitNumber: 5, 
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.2, '#f44336'],  
                            [0.4, '#ffab00'],   
                            [0.6, '#ba68c8'],
                            [0.8, '#4dd0e1'],  
                            [1, '#8bc34a']      
                        ]
                    }
                },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                    distance: -50,
                    color: '#ffffff',
                    fontSize: 14
                },
                pointer: {
                    length: '60%',
                    width: 6,
                    itemStyle: { color: '#ffffff' }
                },
                title: { show: false },
                detail: { show: false },
                anchorName: '满意度',
                anchor: {
                    show: true,
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    nameLocation: 'bottom',
                    nameDistance: 10
                },
                data: [{ value: 97.82 }]
            }
        ],
        axisPointer: {
            show: false
        }

    };
    option && myChart.setOption(option);
});
monthlyTimer = setInterval(() => {
    monthlyTotal.value++;
    monthlyDigits.value = monthlyTotal.value.toString().split('');
}, 1000);
yearlyTimer = setInterval(() => {
    yearlyTotal.value++;
    yearlyDigits.value = yearlyTotal.value.toString().split('');
}, 1000);


onBeforeUnmount(() => {
    // 清除月度累计定时器
    if (monthlyTimer) {
        clearInterval(monthlyTimer);
    }
    // 清除年度累计定时器
    if (yearlyTimer) {
        clearInterval(yearlyTimer);
    }
});

const config = {
    data: [
        {
            name: '非常满意',
            value: 25
        },
        {
            name: '满意',
            value: 45
        },
        {
            name: '基本满意',
            value: 15
        },
        {
            name: '不满意',
            value: 10
        },
        {
            name: '非常不满意',
            value: 25
        },
    ],
    colors: ['#04f21c', '#c5f37f', '#00a8a8', '#f59a23', '#dd4266'],
    //   unit: '单位',
    showValue: true
}

</script>

<style lang="scss" scoped>
::v-deep .unit-label {
    visibility: hidden;
}

.title {
    width: 60%;
    display: flex;
    align-items: center;
    background-color: #052e63;
    border-radius: 50px 15px 0 50px;

    img {
        width: 35px;
        height: 40px;
    }

    span {
        display: block;
        padding: 10px;
        font-weight: bold;
        color: white;
    }

}

.rightBox {
    padding: 15px;
    width: 100%;

    .number {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 15px 0;

        span {
            display: block;
            padding: 18px 12px;
            background-color: #0842b3;
            color: white;
            font-weight: 900;
            font-size: 22px;
        }
    }

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: white;


    }

    .top {
        width: 100%;
        background-color: #07164ebe;

        span {
            font-size: 19px;
        }


    }

    .bottom {
        height: 445px;
    }

    .bottom,
    .center {
        width: 100%;
        background-color: #07164ebe;
        margin-top: 20px;

        span {
            font-size: 19px;
        }

        .main {
            width: 100%;
            height: 200px;
            // margin-top: -40px;
            margin-bottom: 25px
        }
    }
}
</style>